<template>
  <div class="demo">
    <div class="demo-title">嵌套结构与校验信息</div>
    <div class="demo-content">
      <Form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
        @finish="onFinish"
      >
        <Form.Item :name="['user', 'name']" label="Name" :rules="[{ required: true }]">
          <Input v-model:value="formState.user.name" />
        </Form.Item>
        <Form.Item :name="['user', 'email']" label="Email" :rules="[{ type: 'email' }]">
          <Input v-model:value="formState.user.email" />
        </Form.Item>
        <Form.Item :name="['user', 'age']" label="Age" :rules="[{ type: 'number', min: 0, max: 99 }]">
          <InputNumber v-model:value="formState.user.age" />
        </Form.Item>
        <Form.Item :name="['user', 'website']" label="Website">
          <Input v-model:value="formState.user.website" />
        </Form.Item>
        <Form.Item :name="['user', 'introduction']" label="Introduction">
          <Input.TextArea v-model:value="formState.user.introduction" />
        </Form.Item>
        <Form.Item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
          <Button type="primary" html-type="submit">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import InputNumber from '@sscd/input-number';
  import Form from '@sscd/form';
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const validateMessages = {
    required: '${label} is required!',
    types: {
      email: '${label} is not a valid email!',
      number: '${label} is not a valid number!',
    },
    number: {
      range: '${label} must be between ${min} and ${max}',
    },
  };
  const formState = reactive({
    user: {
      name: '',
      age: undefined,
      email: '',
      website: '',
      introduction: '',
    },
  });
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
</script>
